<template>
  <view :style="colorStyle">
    <view class="spikeModule">
      <view class="banner" v-if="banner.length !== 0">
        <swiper
          :indicator-dots="false"
          :autoplay="true"
          circular="true"
          :interval="3000"
          :duration="1000"
        >
          <swiper-item v-for="(item, index, key) in banner" :key="key">
            <image
              :src="item.img"
              mode="aspectFill"
              @click.stop="bannerClickChange(item)"
            ></image>
          </swiper-item>
        </swiper>
      </view>

      <view
        class="ruleModule cfff f24"
        @click="goRule(`/pages/activities/rule?title=活动规则`)"
      >
        活动规则
      </view>

      <view class="countdownModule flex aitems between">
        <view class="block1 cfff f32 fontWeight">
          {{ info.title }}
        </view>
        <view class="block2 flex aitems">
          <view class="tipbox1 cfff f28">
            {{ info.statusText }}
          </view>
          <view class="tipbox2 cfff flex aitems f28 fontWeight">
            <u-count-down
              :time="downTime"
              format="HH:mm:ss"
              autoStart
              millisecond
              @change="downonChange"
              @finish="downfinish"
            >
              <view class="flex aitems">
                <view class="tip1">
                  <text class="">{{
                    timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                  }}</text>
                </view>
                <text class="tip2">:</text>
                <view class="tip1">
                  <text class="">{{
                    timeData.minutes > 10
                      ? timeData.minutes
                      : "0" + timeData.minutes
                  }}</text>
                </view>
                <text class="tip2">:</text>
                <view class="tip1">
                  <text class="">{{
                    timeData.seconds > 10
                      ? timeData.seconds
                      : "0" + timeData.seconds
                  }}</text>
                </view>
              </view>
            </u-count-down>
          </view>
          <!-- <view class="tipbox2 cfff flex aitems f28 fontWeight">
						<view class="tip1">
							08
						</view>
						<view class="tip2">
							:
						</view>
						<view class="tip1">
							08
						</view>
						<view class="tip2">
							:
						</view>
						<view class="tip1">
							08
						</view>
					</view> -->
        </view>
      </view>
    </view>
    <view class="goodsModule">
      <view
        class="goodslist flex"
        v-for="(item, index, key) in list"
        :key="key"
        @click="gourl(`/pages/goods/detail?id=${item.goodsId}`)"
      >
        <image :src="item.goodsImg" class="goodsimg" mode="aspectFill"></image>
        <view class="goodsinfo flex between column">
          <view class="block1">
            <text class="goodsname ellipsis2 c1F1F1F f28">
              {{ item.goodsName }}
            </text>
            <view class="goodslabel flex aitems wrap">
              <view
                class="label f22 fontWeight"
                v-if="item.goodsTagName"
                v-for="(items, indexs) in item.goodsTagName.split(',')"
                :key="'label' + indexs"
                >{{ items }}
              </view>
            </view>
            <view class="goodssale c858585 f22">
              销量:{{ Number(item.salesVolume).toFixed(0) }}
            </view>
          </view>
          <view class="block2 flex between aitems fontWeight">
            <view class="flex">
              <view class="unit f24"> ￥ </view>
              <view class="price f40">
                {{ item.goodsPrice }}
              </view>
            </view>
            <view class="btn cfff f24"> 立即购买 </view>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  publicityGoodsPage,
  publicityInfo,
  bannerList,
  updateParent,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go, back } from "@/utils/wxAPI";
import colors from "@/mixins/color";
import { getGloBalData, getToken, setStorage } from "../../utils/storage";
import { showModal } from "../../utils/wxAPI";
import { handleLoopCallBack } from "../../utils/util";
import { bannerNavigateTo } from "@/utils/navigateTo";
export default {
  mixins: [colors],
  data() {
    return {
      total: 0,
      list: [],
      current: 1,
      menuInfo: {},
      navTitleModuleStyle: "",
      navTitleModuleStyle2: "",
      navTitleModuleStyle3: "",
      list: [],
      activitiesList: [
        {
          name: "今日疯抢",
          status: 1,
        },
        {
          name: "特价活动",
          status: 2,
        },
        {
          name: "补贴专区",
          status: 2,
        },
        {
          name: "今日疯抢",
          status: 1,
        },
        {
          name: "特价活动",
          status: 2,
        },
        {
          name: "补贴专区",
          status: 2,
        },
      ],
      activitiesListindex: 0,
      options: {},
      info: {},
      list: [],
      current: 1,
      total: 0,
      timeData: {},
      downTime: 99999999,
      banner: [],
    };
  },
  async onLoad(options) {
    this.options = options;
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${this.menuInfo.top}px;height:${this.menuInfo.height}px;`;
    this.navTitleModuleStyle2 = `top:10rpx;`;
    this.navTitleModuleStyle3 = `top:6rpx;`;
    // #endif
    // #ifdef H5
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:44rpx;height:88rpx;`;
    // #endif

    if (getToken()) {
      await this.publicityInfo();
      this.bannerList();
      this.publicityGoodsPage();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        await this.publicityInfo();
        this.bannerList();
        this.publicityGoodsPage();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });

      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    bannerClickChange(item) {
      bannerNavigateTo(item);
    },
    async bannerList() {
      let { data } = await bannerList({
        type: this.info.type == "nMoneyNPiece" ? 2 : 4,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let banner = data.data;
        this.banner = banner;
      }
    },
    async publicityInfo() {
      let { data } = await publicityInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        if (!info.id) {
          return showModal({
            t2: data.msg,
            btn1show: false,
          }).then(() => {
            back();
          });
        }
        if (info.type == "nMoneyNPiece") {
          uni.setNavigationBarTitle({
            title: "N元N件",
          });
          info.config = info.config ? JSON.parse(info.config) : {};
        } else {
          uni.setNavigationBarTitle({
            title: "满减专区",
          });
        }
        let now = Date.now();
        let endTime = new Date(info.endTime.replace(/-/g, "/")).getTime();
        let beginTime = new Date(info.beginTime.replace(/-/g, "/")).getTime();

        if (now < beginTime) {
          info.statusText = "距开始";
          this.downTime = beginTime - now;
        } else if (endTime - now > 0) {
          info.statusText = "距结束";
          this.downTime = endTime - now;
        } else {
          info.statusText = "已结束";
          this.downTime = 0;
        }
        // console.log(this.downTime)

        this.info = info;
      }
    },
    async publicityGoodsPage() {
      loading();
      let { data } = await publicityGoodsPage({
        current: this.current,
        size: 10,
        publicityId: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        console.log(this.list);
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    activitiesListChange(index) {
      this.activitiesListindex = index;
    },

    back() {
      back();
    },

    gourl(url) {
      go(url);
    },

    goRule(url) {
      setStorage("rule", this.info.remark);
      go(url);
    },

    downonChange(e) {
      let hours = e.hours + e.days * 24;
      e.hours = hours;
      this.timeData = e;
    },

    downfinish() {
      this.publicityInfo();
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.publicityGoodsPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.publicityGoodsPage();
  },

  onShareAppMessage: function (e) {
    return {
      title: `${this.info.type == "nMoneyNPiece" ? "N元N件" : "满减专区"}`,
      path: `/pages/activities/nynj?uid=${getGloBalData("userinfo").id}&id=${
        this.options.id ? this.options.id : ""
      }`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.spikeModule {
  position: relative;

  .banner {
    swiper {
      height: 320rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .ruleModule {
    position: fixed;
    width: 171rpx;
    height: 56rpx;
    border-radius: 28rpx 0 0 28rpx;
    right: 0;
    top: 66rpx;
    z-index: 9;
    background: rgba(0, 0, 0, 0.6);
    line-height: 56rpx;
    text-align: center;
  }

  .countdownModule {
    background: linear-gradient(
      270deg,
      var(--view-theme) 0.96%,
      var(--view-op-ten6) 97.01%
    );
    height: 108rpx;
    padding: 0 30rpx;

    .block1 {
    }

    .block2 {
      .tipbox1 {
      }

      .tipbox2 {
        margin-left: 20rpx;

        .tip1 {
          // width: 44rpx;
          height: 44rpx;
          border-radius: 10rpx;
          background: #fff;
          color: var(--view-theme);
          text-align: center;
          line-height: 44rpx;
          padding: 0 10rpx;
        }

        .tip2 {
          margin: 0 10rpx;
        }
      }
    }
  }
}

.goodsModule {
  margin: 30rpx 30rpx 0;

  .goodslist {
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx;
    margin: 0 0 24rpx 0;

    .goodsimg {
      width: 230rpx;
      height: 230rpx;
      border-radius: 24rpx;
    }

    .goodsinfo {
      width: calc(100% - 230rpx - 16rpx);
      margin-left: 16rpx;
      height: 260rpx;

      .block1 {
        width: 100%;

        .goodsname {
        }

        .goodslabel {
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            padding: 4rpx 18rpx;
            border: 1px solid var(--view-theme);
            border-radius: 8rpx;
            margin: 0 20rpx 0 0;
          }
        }
      }

      .block2 {
        color: var(--view-theme);

        .unit {
          position: relative;
          top: 16rpx;
        }

        .price {
        }

        .btn {
          background: var(--view-theme);
          border-radius: 63rpx;
          padding: 16rpx 34rpx;
        }
      }
    }
  }
}
</style>
